The order of Svelte actions

Posted on 2023-04-03 by

Does the order of Svelte actions matter? Yes! Let's find out why.

Here we have two input fields. The order of the bind directive and use directive are different in each input. Type in each field and see what happens.

App.svelte

<script>
	let valueBeforeAction = "";
	let valueAfterAction = "";

	function uppercase(element) {
		function onInput(event) {
			element.value = element.value.toUpperCase();
		}
		element.addEventListener("input", onInput);

		return {
			destroy() {
				element.removeEventListener("input", onInput);
			},
		};
	}
</script>

<input bind:value={valueBeforeAction} use:uppercase />

<input use:uppercase bind:value={valueAfterAction} />

<div>
	{valueBeforeAction}
</div>

<div>
	{valueAfterAction}
</div>

As you can see the left input always ends with a lowercase letter*. This is because we're binding to the value before our action** so the saved result doesn't include the result of the action function.

The right input ends with an uppercase letter since we're binding after we have run the action .

Note that if you have event.stopImmediatePropagation() in your code the action will "eat" the event and prevent the bind.

The right input field doesn't bind because we're using event.stopImmediatePropagation().

App2.svelte

<script>
	let valueBeforeAction = "";
	let valueAfterAction = "";

	function uppercase(element) {
		function onInput(event) {
			element.value = element.value.toUpperCase();
      event.stopImmediatePropagation()
		}
		element.addEventListener("input", onInput);

		return {
			destroy() {
				element.removeEventListener("input", onInput);
			},
		};
	}
</script>

<input bind:value={valueBeforeAction} use:uppercase />

<input use:uppercase bind:value={valueAfterAction} />

<div>
	{valueBeforeAction}
</div>

<div>
	{valueAfterAction}
</div>

So, pay attention to directive order and functions like event.stopImmediatePropagation() in order to use actions successfully.